export class Waterfall {
    constructor(options){
        this.$options  = options;
        this.miniHeightList = [];
        this.__init();
    }

    __init(){
        this.waterfallBox = document.querySelector(this.$options.el);
        this.items = this.waterfallBox.children;
        this.column = this.$options.column;
        this.gap = this.$options.gap;
        this.itemWidth = (this.waterfallBox.offsetWidth - this.gap * (this.column -  1))/this.column;
        this.__render();
    }

    __render(){
        [...this.items].forEach((value,index) => {
            value.style.width = this.itemWidth + "px";
            if(index < this.column){
                value.style.top = "0px";
                value.style.left = (this.itemWidth + this.gap) * index + "px";
                this.miniHeightList.push(value.offsetHeight);
            }else{
                this.miniIndex = this.__getMiniHeight();
                value.style.top = this.miniHeightList[this.miniIndex] + this.gap + "px";
                value.style.left = (this.itemWidth + this.gap) * this.miniIndex + "px";
                this.miniHeightList[this.miniIndex] =this.miniHeightList[this.miniIndex] +  this.gap + value.offsetHeight;
            }
        })
    }

    __getMiniHeight(){
        return this.miniHeightList.indexOf(Math.min(...this.miniHeightList));
    }
}